<template>
  <!-- 个人设置中心 -->
  <div>
    <van-nav-bar
      @click-left="onClickLeft"
      :border="false"
      title="个人资料"
      left-arrow
    ></van-nav-bar>
    <!-- 头像修改 -->
    <van-cell
      center
      style="margin: 10px 0"
      title="头像："
      size="large"
      is-link
      value="更换"
    ></van-cell>

    <!-- 修改名称 -->
    <van-cell-group>
      <van-cell center value="修改" is-link size="large">
        <!-- 使用 title 插槽来自定义标题 -->
        <template #title>
          <span>昵称：</span>
          <span class="custom-title" style="font-size: 14px; color: #969799"
            >蔡徐坤</span
          >
        </template>
      </van-cell>
      <van-cell center is-link :value="sex" @click="show = true">
        <template #title>
          <span style="font-size: 16px">性别：</span>
        </template>
      </van-cell>
      <van-action-sheet v-model="show" :actions="actions" @select="onSelect" />
      <van-cell center title="简介：" size="large" is-link></van-cell>
    </van-cell-group>

    <van-cell-group style="margin: 10px 0">
      <van-cell
        center
        title="手机号："
        size="large"
        is-link
        value="修改"
      ></van-cell>
      <van-cell
        center
        title="收货信息："
        size="large"
        is-link
        to="/addr_info"
        value="填写"
      ></van-cell>
    </van-cell-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      actions: [{ name: "保密" }, { name: "男" }, { name: "女" }],
      sex: "保密",
    };
  },
  methods: {
    onSelect(item) {
      this.show = false;
      this.sex = item.name;
    },
    onClickLeft() {
      return this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
:deep(.van-nav-bar .van-icon) {
  color: #000;
}
:deep(.van-cell__right-icon) {
  line-height: 20px;
}
:deep(.van-cell__value) {
  color: #e98b71;
}
</style>

<style lang="scss" scoped></style>
